<template>
    <!-- <div class="ab_nav show"> -->
    <div :class="{
        ab_nav: true,
        show: data.is_show
    }">
        <div class="ab_container">
            <div class="logo">
                <div>雨过天晴</div>
                <div>AEROSPACE BLOG</div>
            </div>
            <div class="left">
                <span>
                    <!-- <a href="/" class="route-link-active">首页</a> -->
                    <RouterLink to="/">首页</RouterLink>
                </span>
                <span>
                    <!-- <a href="/news" class="">新闻</a> -->
                    <RouterLink to="/news">新闻</RouterLink>
                </span>
                <span>
                    <!-- <a href="/mood" class="">心情</a> -->
                    <RouterLink to="/mood">心情</RouterLink>
                </span>
                <span>
                    <!-- <a href="/about" class="">关于</a> -->
                    <RouterLink to="/about">关于</RouterLink>
                </span>
                <span>
                    <!-- <a href="/search" class="">文章搜索</a> -->
                    <RouterLink to="/search">文章搜索</RouterLink>
                </span>
                <span>
                    <!-- <a href="/chat" class="">聊天室</a> -->
                    <RouterLink to="/chat">聊天室</RouterLink>
                </span>
                <span class="search">
                    <!-- <font-awesome-icon icon="fa-solid fa-magnifying-glass-chart" /> -->
                    <font-awesome-icon icon="fa-solid fa-magnifying-glass" />
                    <!-- <font-awesome-icon icon="fa-solid fa-user" /> -->

                    <!-- <font-awesome-icon icon="magnifying-glass" /> -->
                    <!-- <font-awesome-icon icon="fa-solid fa-magnifying-glass" /> -->
                    <!-- <font-awesome-icon icon="fa-solid fa-user-secret" /> -->
                    <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                </span>
            </div>
            <div class="right">
                <span class="login_btn" v-if="counterStore.count === 0">
                    <router-link :to="{name:'login', query: {redirect_url: $route.path}}">登录</router-link>
                    <!-- <a href="/login" class="loginButton" >登录</a> -->
                </span>
                <span>
                    <a href="/register" class="">注册</a>
                </span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {useCounterStore} from "@/stores/counter";
import { reactive, ref } from "vue";
const counterStore = useCounterStore()

const props = defineProps({
    is_show: {
        type: Boolean,
        default: false,
    }
})

const data = reactive({
    is_show: false,
})

const is_show = ref(false)

async function getInit(){
    if(props.is_show){
        data.is_show = true
    } else {
        window.addEventListener("scroll", scroll)
    }
}
getInit()

function scroll(){
    let top = document.documentElement.scrollTop
    console.log("scroll", top)
    if(top >= 200){
        data.is_show = true;
    } else {
        data.is_show = false;
    }
}

// window.addEventListener("scroll", scroll)
</script>

<style lang="scss">
.ab_nav {
    position: fixed;
    top: 0%;
    width: 100%;
    height: 60px;
    // background-color: white;
    // box-shadow: 1px 1px 5px #0003;
    display: flex;
    justify-content: center;
    font-size: 16px;
    z-index: 100;
    color: white;
    .logo {
        width: 10%;
        transform: scale(0.9);

        div:first-child {
            font-size: 26px;
        }

        // 不能有空行
        div:last-child {
            font-size: 12px;
        }
    }

    .left {
        width: 50%;
        display: flex;

        span {
            margin-right: 30px;
        }

    }
    a {
        color: white;

        &:hover {
            color: blue;
        }
    }

    .right {
        width: 40%;
        display: flex;
        justify-content: right;

        span {
            margin-right: 10px;
        }

        a {
            color: white;
        }

        .loginButton {
            margin-right: 20px;
        }
    }

    .search i {
        cursor: pointer;
    }
}

// .ab_banner {
//   width: 1200px;
//   background-color: #ccc;
// }
.ab_container {
    width: 1200px;
    //   background-color: #eee;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

// .ab_footer {
//   width: 100px;
//   background-color: #000;
// }
.base_view {
    background-color: #f0eeee;
    margin-top: 0;
}

body {
    --bg: #f0eeee;
    --active: rgb(var(--arcoblue-6));
    --login_bg: rgba(255, 255, 255, 0.8);
    --charts_color1: #53b8ec;
    --charts_color2: #f15427;
    --nav_text_color: white;
    --container_width: 1200px;
    --md-bk-color: white;
    --hightColor: #d71345;
    --scrollbarBg: rgba(0, 0, 0, 0.1);
    --maskBg: rgba(0, 0, 0, 0.01);
    //   vue3中body有默认属性margin:8px如何去掉?
    margin: 0;
}

.ab_nav.show{
    background-color: white;
    box-shadow: 1px 1px 5px #0003;
    color: #2b3539;
    
    a {
        color: #2b3539;

        &:hover {
            color: blue;
        }
    }
}
</style>